<template>
	<!-- 美容美发预约 -->
	<view class="max">
		<view class="head bg-white flex">
			<image :src="url+food.main_images[0]" mode=""></image>
			<view class="text_div">
				<text class="title">{{food.name}}</text>
				<view class="flex align-center money">

					<text>原价:￥{{food.service.price}}</text>
					<text class="vipPrice">会员价:￥{{food.service.vip_price}}</text>
				</view>
				<text class="jifen">积分最多抵扣￥{{food.service.point_deduct_max_amount||0}}</text>
				<view class="kucun">库存{{food.service.stock||0}}</view>
			</view>
		</view>
		<view class="bg-white time">
			<view class="num flex align-center">
				<text>联系人：</text><input type="text" v-model="user.nickname" placeholder="请输入预约人姓名">
			</view>
			<view class="num flex align-center">
				<text>联系方式：</text>
				<input type="text" v-model="user.phone" placeholder="请输入预约人电话">
			</view>
		</view>
		<view class="type bg-white">
			<text>服务项目</text>
			<view class="type_list flex flex-wrap">
				<!-- :class="{item:index == istype}" -->
				<!-- @click="istype =index" -->
				<view v-for="(i,key) in xms" :key="key" class="flex-c" @click="istype =key"
					:class="{item:key == istype}">
					{{i.name}}
				</view>
			</view>
		</view>
		<view class="bg-white time">
			<picker mode="time" range="" @change="change">
				<view class="num flex-cb">
					<text>预约时间</text>
					<view class="flex-cb time_pic">
						<text>{{time==''?'':time}}</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</picker>
			<view class="num flex-cb">
				<text>预约数量</text>
				<view class="num_div flex-cb">
					<view @click.stop="__num">-</view>
					<view class="addnum">{{num}}</view>
					<view @click.stop="addNum">+</view>
				</view>
			</view>
		</view>
		<view class="bg-white address">
			<view class="num flex-cb">
				<text>商家地址</text>
			</view>
			<view class="num2 flex-cb">
				{{address}}
				<text class="cuIcon-dianhua" @click="handlePhone"></text>
			</view>
		</view>
		<view class="colse">
			<view class="flex-cb" @click="iscolse = 0">
				<text>无优惠：</text>
				<view class="cuIcon-squarecheckfill" v-if="iscolse ==0"></view>
				<text class="cuIcon" v-else></text>
			</view>
			<!-- v-if="food.service.point_deduct_amount != 0" -->
			<view class="flex-cb" @click="iscolse =1">
				<text class="jifen">积分抵扣￥{{food.service.stock||0}}</text>
				<view class="cuIcon-squarecheckfill" v-if="iscolse ==1"></view>
				<text class="cuIcon" v-else></text>
			</view>
			<view class="flex-cb" @click="handleColse" v-if="food.service.vip_price">
				<text class="vipPrice">会员价:￥{{food.service.vip_price}}</text>
				<view class="cuIcon-squarecheckfill" v-if="iscolse ==2"></view>
				<text class="cuIcon" v-else></text>
			</view>
		</view>
		<view class="colse" style="min-height: auto;font-weight: bold;margin-bottom: 210rpx;" v-if="food.point !=0">
			<text>下单返：{{food.point}}积分</text>
		</view>
		<view class="foot flex-cb">
			<view class="money flex align-center">
				<text style="font-size: 30rpx;">￥</text>
				<text style="font-size: 40rpx;">{{iscolse==0?price:iscolse==1?point_price:vip_price}}</text>
				<!-- <text style="font-size: 24rpx;margin-left: 20rpx;">原价：{{price}}</text> -->
			</view>
			<view class="button flex-c" @click="pay">去结算</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				time: '',
				num: 1,
				phone: '',
				iscolse: 0, //0积分抵扣 1会员价
				shop: '',
				food: '',
				user: '',
				price: 0.00,
				p: 0.00,
				vip_price: 0.00,
				v: 0.00,
				point_price: 0,
				address: '', //商家地址
				xms: '',
				istype: 0,
				timx:''
			};
		},
		onLoad(e) {
			this.url = this.$base
			this.shop = JSON.parse(e.shop)
			this.food = JSON.parse(e.food)
			// 商品属性
			this.sku = this.food.service
			// 服务项目
			let arr = []
			arr = [...this.sku.items]
			this.xms = arr
			console.log(this.food);
			this.$api.user().then(res => {
				this.user = res.data
			})
			this.phone = this.shop.contact_phone
			// this.price = this.$utils.changeTwoDecimal_f(this.food.service.price)
			// this.p = this.price
			this.vip_price = this.$utils.changeTwoDecimal_f(this.food.service.vip_price)
			console.log(this.vip_price,'this.vip_price========');
			// this.v = this.vip_price
			// this.point_price = this.$utils.changeTwoDecimal_f(this.food.service.price-this.food.service.point_deduct_max_amount)
			this.$api.addresses_list().then(res => {
				console.log(res);
			})
			uni.getStorage({
				key: 'address',
				success: res => {
					console.log(res.data);
					this.address = res.data
				}
			})
			this.price = this.$utils.changeTwoDecimal_f(Number(this.sku.price) * Number(this.num))

		},
		methods: {
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			handleColse() {
				this.iscolse = 2
				this.$api.user().then(res => {
					if (res.data.vip_expire_time == null) {
						this.getVip()
					} else {
						// 
						let t = new Date(res.data.vip_expire_time.replace(/-/g, "/")).getTime() / 1000; //到期时间戳
						let newt = Date.parse(new Date()) / 1000 //当前时间戳
						console.log(t);
						if (t < newt) {
							this.getVip(1)
						}
					}
				})
			},
			change(e) {
				this.time = e.detail.value
			},
			pay() {
				if (this.shop.is_open == 0) {
					this.$utils.tips('店铺已经打烊了~')
					return
				}
				if (this.user.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入预约人姓名'
					})
					return
				}
				if (this.user.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入预约人电话'
					})
					return
				}
				if (this.time == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择预约时间'
					})
					return
				}
				let date = new Date()
				let nian = date.getFullYear()
				let yue = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
				let da = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
				let miao = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
				this.timx = nian + '-' + yue + '-' + da + ' ' + this.time + ':' + miao
				// console.log(time);
				let obj = {
					type: 5,
					goods_id: this.food.id, //商品id
					number: this.num,
					self_pick_time: this.timx,
					discount_method: this.iscolse, //优惠方式
					user_nickname: this.user.nickname,
					user_phone: this.user.phone
				}
				console.log('去结算', obj);
				this.$api.orders_merchants(obj, this.food.mch_id, 1).then(res => {
					console.log(res);
					if (res.code == 200001) {
						console.log(res.data.order_id);
						// this.payzf(res.data.order_id)
					}
					if (res.code == 100407) {
						this.$utils.tips('你的积分不足')
						return
					}
					if (res.code == 100403) {
						this.getVip()
					}
				})
			},
			getVip(i) {
				uni.showModal({
					title: '提示',
					content: i == 1 ? '您的会员已到期，是否前往续费' : '您还不是会员无法享受会员价，是否前往开通',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pageC/mine/Function list/vip'
							})
						}
					}
				})
			},
			__num() {
				if (this.num != 1) {
					this.num--
					this.vip_price = this.$utils.changeTwoDecimal_f(this.v * this.num)
					this.price = this.$utils.changeTwoDecimal_f(this.p * this.num)
				} else {
					uni.showToast({
						icon: "none",
						title: '不能再少了~'
					})
				}
			},
			addNum() {
				// 检查库存
				if (this.food.service.stock == this.num) {
					return
				} else {
					this.num++
					this.vip_price = this.$utils.changeTwoDecimal_f(this.sku.vip_price * this.num)
					this.price = this.$utils.changeTwoDecimal_f(Number(this.sku.price) * Number(this.num))
					// this.price = Number(this.sku.price) * Number(this.num)
					console.log(this.price);
				}
			},
			handlePhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
				})
			},
			payzf(id) {
				this.$api.cart_orders_pay({}, id, 1).then(res => {
					let that = this
					console.log(res, '嘎嘎');
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (r) => {
							console.log(r, 3);
							that.$api.cart_orders_notify({}, id, 1).then(res => {
								console.log(res, '4');
								if (res.code == 200001) {
									uni.showToast({
										title: "下单成功",
										icon: "none"
									})
									// that.deteles()//删除购物车商品
									uni.navigateBack({
										delta: 1,
										animationDuration: 500
									})
								}
							})
						},
						complete(err) {
							console.log(err);
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.max {
		.max {
			margin-bottom: 50rpx;
		}
	}

	.diss {
		display: flex;
		font-size: 40rpx;

		.dissx {
			width: 20rpx;
		}
	}

	.head {
		width: 710rpx;
		height: 222rpx;
		border-radius: 10rpx;
		margin: 10rpx auto;
		padding: 20rpx;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			margin-right: 22rpx;
		}

		.text_div {
			.title {
				height: 45rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.money {
				margin-top: 8rpx;
				margin-bottom: 10rpx;
				font-size: 28rpx;
				flex-wrap: 500;

				.vipPrice {
					color: #FF2E2E;
					margin-left: 20rpx;
				}
			}

			.jifen {
				font-size: 24rpx;
				color: #FF9100;
			}

			.kucun {
				margin-top: 9rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.time {
		width: 706rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin: 10rpx auto;

		.num {
			padding: 31rpx 30rpx 0 28rpx;

			text {
				font-size: 30rpx;
				color: #2F2F2F;
				font-weight: bold;
			}

			.time_pic {
				text {
					color: #1CD699;
				}

				.cuIcon-right {
					font-size: 25rpx;

				}
			}

			.num_div {
				view {
					width: 60rpx;
					height: 60rpx;
					background: #F2F2F2;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
				}

				.addnum {
					width: 100rpx;
					margin: 0 20rpx;
				}
			}
		}
	}

	.type {
		width: 706rpx;
		height: auto;
		border-radius: 10rpx;
		margin: 10rpx auto;
		padding: 30rpx 0 24rpx 24rpx;

		text {
			font-size: 30rpx;
			font-weight: bold;
			color: #2F2F2F;
		}

		.type_list {
			margin-top: 41rpx;

			view {
				width: 121rpx;
				height: 60rpx;
				background: #F2F2F2;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #999999;
				margin-right: 16rpx;
			}

			.item {
				color: #fff;
				background: #1CD699;
			}
		}
	}

	.address {
		width: 710rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin: 10rpx auto;
		padding: 24rpx;

		text {
			font-size: 30rpx;
			color: #999999;
		}

		.num2 {
			margin-top: 18rpx;

			text {
				font-size: 28rpx;
				color: #333333;
			}

			.cuIcon-dianhua {
				color: #1CD699;
				font-size: 34rpx;
			}
		}
	}

	.colse {
		margin: 10rpx auto;
		width: 706rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 23rpx;
		padding-bottom: 140rpx !important;

		view {
			height: 40rpx;
			margin-bottom: 33rpx;
			font-size: 30rpx;
			color: #2F2F2F;
			font-weight: bold;

			.cuIcon {
				margin: 0;
				width: 40rpx;
				height: 40rpx;
				background: #F0F0F0;
				border-radius: 6rpx;
			}

			.cuIcon-squarecheckfill {
				font-size: 44rpx;
				color: #1CD699;
				font-weight: 100;
			}
		}
	}

	.foot {
		width: 710rpx;
		height: 100rpx;
		color: #fff;
		position: fixed;
		bottom: 46rpx;
		left: 20rpx;

		.money {
			flex: 1;
			height: 100%;
			padding-left: 45rpx;
			border-radius: 50rpx 0 0 50rpx;
			background: #000;
		}

		.button {
			width: 168rpx;
			height: 100%;
			background: #1CD699;
			border-radius: 0 50rpx 50rpx 0;
			font-size: 30rpx;
		}
	}
</style>
